<template>
  <div class="marginT30 el-card-size">
    <el-tabs v-model="commentName" type="border-card">
      <el-tab-pane v-if="thumbNum !== null && thumbNum !== undefined" disabled name="first">
        <span slot="label">
          <i class="el-icon-thumb" />
          {{ thumbNum }}
        </span>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label">
          <i class="el-icon-chat-dot-round" />
          {{ commentNum }}
        </span>
        <div class="text-center">
          <el-form :inline="true" :model="listQuery" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="listQuery.condition.keyword" clearable placeholder="搜索" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getCommentList">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="commentList && commentList.length > 0" class="el-tab-pane-size">
          <!--    star        -->
          <div v-for="(item, index) in commentList" :key="index" class="text-line-height-30">
            <div v-if="item.userId !== listData.userId">
              <!-- {{ item.userId }} -->
              <div class="clearfix">
                <el-avatar
                  v-if="item.userHead"
                  :size="40"
                  class="avatar-size fl"
                  :src="item.userHead"
                />
                <el-avatar
                  v-else
                  class="avatar-size fl"
                  :size="40"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <div class="fl marginL10 text-line-height">
                  <div class="fl">
                    <span class="fs-16">{{ item.userName }}</span>
                    <span class="fs-14 color-gray marginL10">{{ item.createTime }}</span>
                    <span v-if="item.status === 'CANCEL'" class="fs-14 color-gray marginL10">评论已取消</span>
                    <span v-if="item.status === 'NOT_SHOW'" class="fs-14 color-gray marginL10">评论已屏蔽</span>
                  </div>
                </div>
              </div>
              <div style="margin-left: 50px">
                <el-row>
                  <el-col :span="16">
                    <div
                      class="grid-content text-line-height-30"
                      style="word-wrap:break-word;word-break:break-all;"
                    >
                      <span>{{ item.content }}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content">
                      <br />
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <el-button type="text" @click="getUpdateStatus(item,index, true)">屏蔽</el-button>
                      <el-button type="text" @click="getUpdateStatus(item,index, false)">恢复</el-button>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="text-center">
                      <el-button
                        v-if="item.replyCount > 0 && item.children <= 0"
                        type="text"
                        @click="getReplyPage(item, index)"
                      >
                        展开回复
                        <span style="position: relative; top: 4px;">﹀</span>
                      </el-button>
                      <!-- <el-button v-else type="text">
                        收起回复
                        <span style="position: relative; top: -4px;">︿</span>
                      </el-button>-->
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div
                      v-if="item.children && item.children.length > 0"
                      style="position: relative;"
                    >
                      <div v-for="(itemChild, inxChild) in item.children" :key="inxChild">
                        <div class="clearfix">
                          <el-avatar
                            v-if="itemChild.userHead"
                            class="avatar-size fl"
                            :src="itemChild.userHead"
                            :size="40"
                          />
                          <el-avatar
                            v-else
                            :size="40"
                            class="avatar-size fl"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                          />
                          <div class="fl marginL10 text-line-height">
                            <div class="fl">
                              <span
                                v-if="itemChild.userId !== listData.userId"
                                class="fs-16 color-blue"
                              >{{ itemChild.userName }}</span>
                              <span v-else class="fs-16 color-blue">作者</span>

                              <span>{{ itemChild.replyName }}</span>
                              <span class="fs-14 color-gray marginL10">{{ itemChild.createTime }}</span>
                              <span
                                v-if="itemChild.status === 'CANCEL'"
                                class="fs-14 color-gray marginL10"
                              >评论已取消</span>
                              <span
                                v-if="itemChild.status === 'NOT_SHOW'"
                                class="fs-14 color-gray marginL10"
                              >评论已屏蔽</span>
                            </div>
                          </div>
                        </div>

                        <div style="margin-left: 50px">
                          <el-row>
                            <el-col :span="16">
                              <div
                                class="grid-content text-line-height-30"
                                style="word-wrap:break-word;word-break:break-all;"
                              >
                                <span>{{ itemChild.content }}</span>
                              </div>
                            </el-col>
                            <el-col :span="4">
                              <div class="grid-content">
                                <br />
                              </div>
                            </el-col>
                            <el-col :span="4">
                              <div class="grid-content">
                                <el-button
                                  type="text"
                                  @click="getUpdateStatus(itemChild,inxChild, true, index)"
                                >屏蔽</el-button>
                                <el-button
                                  type="text"
                                  @click="getUpdateStatus(itemChild,inxChild, false, index)"
                                >恢复</el-button>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                      <el-col :span="24">
                        <div class="text-center">
                          <el-button type="text" @click="removeReplyPage(item, index)">
                            收起回复
                            <span style="position: relative; top: -4px;">︿</span>
                          </el-button>
                        </div>
                      </el-col>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div v-else>
              <div class="clearfix">
                <el-avatar
                  v-if="item.userHead"
                  class="avatar-size fl"
                  :src="item.userHead"
                  :size="40"
                />
                <el-avatar
                  v-else
                  :size="40"
                  class="avatar-size fl"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <div class="fl marginL10 text-line-height">
                  <div class="fl">
                    <span class="fs-16 color-blue">作者</span>&nbsp;回复
                    <span class="fs-14 color-gray marginL10">{{ item.createTime }}</span>
                    <span v-if="item.status === 'CANCEL'" class="fs-14 color-gray marginL10">评论已取消</span>
                    <span v-if="item.status === 'NOT_SHOW'" class="fs-14 color-gray marginL10">评论已屏蔽</span>
                  </div>
                </div>
              </div>
              <div style="margin-left: 50px">
                <el-row>
                  <el-col :span="16">
                    <div
                      class="grid-content text-line-height-30"
                      style="word-wrap:break-word;word-break:break-all;"
                    >
                      <span>{{ item.content }}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content">
                      <br />
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content">
                      <el-button type="text" @click="getUpdateStatus(item,index, true)">屏蔽</el-button>
                      <el-button type="text" @click="getUpdateStatus(item,index, false)">恢复</el-button>
                    </div>
                  </el-col>

                  <el-col :span="24">
                    <div class="text-center">
                      <el-button
                        v-if="item.replyCount > 0 && item.children <= 0"
                        type="text"
                        @click="getReplyPage(item, index)"
                      >
                        展开回复
                        <span style="position: relative; top: 4px;">﹀</span>
                      </el-button>
                      <!-- <el-button v-else type="text">
                        收起回复
                        <span style="position: relative; top: -4px;">︿</span>
                      </el-button>-->
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div
                      v-if="item.children && item.children.length > 0"
                      style="position: relative;"
                    >
                      <div v-for="(itemChild, inxChild) in item.children" :key="inxChild">
                        <div class="clearfix">
                          <el-avatar
                            v-if="itemChild.userHead"
                            class="avatar-size fl"
                            :src="itemChild.userHead"
                            :size="40"
                          />
                          <el-avatar
                            v-else
                            :size="40"
                            class="avatar-size fl"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                          />
                          <div class="fl marginL10 text-line-height">
                            <div class="fl">
                              <span
                                v-if="itemChild.userId !== listData.userId"
                                class="fs-16 color-blue"
                              >{{ itemChild.userName }}</span>
                              <span v-else class="fs-16 color-blue">作者</span>

                              <span>{{ itemChild.replyName }}</span>
                              <span class="fs-14 color-gray marginL10">{{ itemChild.createTime }}</span>
                              <span
                                v-if="itemChild.status === 'CANCEL'"
                                class="fs-14 color-gray marginL10"
                              >评论已取消</span>
                              <span
                                v-if="itemChild.status === 'NOT_SHOW'"
                                class="fs-14 color-gray marginL10"
                              >评论已屏蔽</span>
                            </div>
                          </div>
                        </div>

                        <div style="margin-left: 50px">
                          <el-row>
                            <el-col :span="16">
                              <div
                                class="grid-content text-line-height-30"
                                style="word-wrap:break-word;word-break:break-all;"
                              >
                                <span>{{ itemChild.content }}</span>
                              </div>
                            </el-col>
                            <el-col :span="4">
                              <div class="grid-content">
                                <br />
                              </div>
                            </el-col>
                            <el-col :span="4">
                              <div class="grid-content">
                                <el-button
                                  type="text"
                                  @click="getUpdateStatus(itemChild,inxChild, true, index)"
                                >屏蔽</el-button>
                                <el-button
                                  type="text"
                                  @click="getUpdateStatus(itemChild,inxChild, false, index)"
                                >恢复</el-button>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                      <el-col :span="24">
                        <div class="text-center">
                          <el-button type="text" @click="removeReplyPage(item, index)">
                            收起回复
                            <span style="position: relative; top: -4px;">︿</span>
                          </el-button>
                        </div>
                      </el-col>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center fs-14 color-gray">暂无评论消息</div>
        <pagination v-if="total > 0" :total="total" @pagination="pagination" />
        <div />
      </el-tab-pane>
      <el-tab-pane v-if="viewNum !== null && viewNum !== undefined" disabled name="three">
        <span slot="label">
          <i class="el-icon-view" />
          {{ viewNum }}
        </span>
      </el-tab-pane>
      <el-tab-pane v-if="shareNum !== null && shareNum !== undefined" name="four" disabled>
        <span slot="label">
          <i class="el-icon-share" />
          {{ shareNum }}
        </span>
        <!--            我的行程-->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index';
import { getComment, replyPage, updateStatus } from '@/api/activity';
export default {
  name: 'Comment',
  components: {
    Pagination
  },
  props: ['list', 'tabsName', 'subType', 'subId', 'countView', 'countComment', 'countShare', 'countThumb'],
  data () {
    return {
      commentName: this.tabsName,
      formInline: {
        search: null
      },
      listData: this.list,
      total: 10,
      commentList: null, // 评论列表
      // 查询条件
      listQuery: {
        condition: {
          keyword: null,
          status: null,
          subjectId: this.subId,
          subjectType: this.subType
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      viewNum: this.countView,
      thumbNum: this.countThumb,
      commentNum: this.countComment,
      shareNum: this.countShare
    };
  },
  computed: {
  },
  watch: {
    subId: {
      deep: true,
      handler (data) {
        this.listQuery.condition.subjectId;
        this.getCommentList();
      }
    },
    countView: {
      deep: true,
      handler (data) {
        this.viewNum = data;
      }
    },
    countThumb: {
      deep: true,
      handler (data) {
        this.thumbNum = data;
      }
    },
    countComment: {
      deep: true,
      handler (data) {
        this.commentNum = data;
      }
    },
    countShare: {
      deep: true,
      handler (data) {
        this.shareNum = data;
      }
    }
  },
  created () {
    this.getCommentList();
  },
  methods: {
    // 查询评论列表
    getCommentList () {
      this.listQuery.condition.keyword = this.listQuery.condition.keyword ? this.listQuery.condition.keyword : null;
      getComment(this.listQuery)
        .then(res => {
          res.data.records.map(item => {
            item.children = new Array();
          });
          this.commentList = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    // 展开回复
    getReplyPage (item, index) {
      replyPage({
        condition: {
          id: item.id,
          showOk: true
        },
        pager: {
          page: 1,
          pageSize: 999
        }
      }).then(res => {
        res.data.records.map(item => {
          var inx = item.content.indexOf('：');
          item.replyName = item.content.substring(0, inx);
          item.content = item.content.substring(inx + 1, item.content.length);
        });
        this.commentList[index].children = res.data.records;
      });
    },
    // 收起回复
    removeReplyPage (item, index) {
      this.commentList[index].children = [];
    },

    // 评论 - 屏蔽/恢复
    getUpdateStatus (items, index, notShow, inx) {
      console.log('notShow:', notShow);
      updateStatus({
        id: items.id,
        notShow: notShow
      }).then(res => {
        if (inx) {
          this.commentList[inx].children[index].status = notShow ? 'NOT_SHOW' : 'OK';
        } else {
          this.commentList[index].status = notShow ? 'NOT_SHOW' : 'OK';
        }

        notShow
          ? this.$message({
            message: '屏蔽成功',
            type: 'success'
          })
          : this.$message({
            message: '恢复成功',
            type: 'success'
          });
      });
    },

    pagination ({ page, limit }) {
      this.listQuery.pager.page = page;
      this.listQuery.pager.pageSize = limit;
      this.getCommentList();
    }
  }
};
</script>

<style lang='scss' scoped>
.avatar-size {
  position: relative;
  top: 10px;
}
</style>
